<template>
    <el-container class="addwork">
      <el-header class="header">
        <div class="header-img1">
            <img src="@/assets/img/左箭头.png" @click="route.push('/course/Course?courseId=' + courseId)"/>
            &nbsp;
            <span class="header-text">编辑作业</span>           
        </div>
      </el-header>
      <el-container>
        
                     
        <el-main class="main">
          <div class="name">
              <div class="name_01">章节名称：</div>
              <div class="name_02"><el-input  v-model="Sectionname" style="width: 230px" disabled placeholder="章节名称" /></div>
              <div class="name_01">小节名称：</div>
              <div class="name_02"> <el-input v-model="getSectionName" style="width: 230px;" disabled placeholder="小节名称" /></div>
          </div>
            <el-form label-width="120px" v-model="task">
                <el-form-item class="form-item">
                  <div class="form-item-text">
                      <wangEditor :content="answer" style="height: 100%; width: 100%;" @update="update"/>
                  </div>
                </el-form-item>
                <el-button color="red" class="ScWork" @click="save">确认提交</el-button>                   
            </el-form>
        </el-main>
      </el-container>
    </el-container>
</template>
<script setup>
import { selectAllTask, selectTaskById, insertOrUpdateTask, selectUserInfo, selectSectionName , selectSection } from '@/api/common/work/work.js'
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from 'element-plus'
import axios from 'axios';
import route from "@/router";
import { useRoute } from "vue-router";
import { useTokenStore } from "@/store/token.js";
import { FolderAdd } from '@element-plus/icons-vue'
//引入封装好的富文本编辑器
import wangEditor from '@/components/wangEditor.vue';

const answer = ref('')
//监听富文本内容
const update = (content) => {
  answer.value = content;
}

const router = useRoute();

//作业模型
const sectionId = ref();
const courseId = ref();

//获取小节名称
const getSectionName = ref(null)
const sectionName = async () => {
  let res = await selectSectionName(router.query.sectionId)
 // console.log(res)
  getSectionName.value = res.data.sectionName
}
sectionName();

//获取创建人名称
const getName = ref('')
const getUserName = async () => {
  let res = await selectUserInfo()
  getName.value = res.data.nickName
  task.value.teacherId = res.data.userId
}
getUserName();

//获取章节名称
const Sectionname = ref('')
const cSectionName = async () => {
  let res = await selectSection(router.query.sectionId)
  Sectionname.value = res.data
}


//存放作业的对象
const task = ref({
  sectionId: router.query.sectionId,
  teacherId: 0,
  taskName: ""
});

onMounted(() => {
  let sectId = router.query.sectionId
  sectionId.value = sectId
  courseId.value = router.query.courseId
  cSectionName()
})

//提交作业
const save = async () => {
  task.value.taskName = answer.value
  const res = await insertOrUpdateTask(task.value)
  if(res.code == 200){
    ElMessage.success('添加或修改成功')
    route.push('/course/Course?courseId=' + courseId.value)
  }else{
    ElMessage.error('添加或修改失败')
  }
}

//查询作业
const selectTask = async () => {
  let res = await selectAllTask(task.value.sectionId)
 //console.log(res.data)
  answer.value = res.data.taskName
}
selectTask()

</script>


<style lang='scss' scoped>

header{
    width: 85.1%;
    height: 4.5%;
    box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 9.8%;
    bottom: 86.5%;
}

aside{
    width: 20%;
    height: 83.5%;
    box-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 1.8%;
    left: 9.8%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-img1 {
    width: 300px;
    height: 60px;
    float: left;
    margin-top: 4px;
    margin-left: -10px;
    border-radius: 1rem;
    
    img {
      width: 27px;
      margin-left: 9px;
      margin-top: 15px;
    }

    .header-text{
        position: absolute;
        font-size: 120%;
        font-weight: bold;
        font-family: "微软雅黑";
        bottom: 20%;
    }

}

.name {
  margin-left: 2%;
  display: flex;
  align-items: center;
  margin-top: 0.5%;
    .name_01{
        margin-left: 6px;
    }
    .name_02{
        margin-left: 11px;
        margin-right: 10px;
    }
}

.num {
    width: 85%;
    height: 65%;
    box-shadow: 0px 0px 15px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 8%;
    top: 32%;
    .num_01{
        margin-top: 6px;
        margin-left: 5px;
        font-weight: bold;
        font-family: "微软雅黑";
    }
    .num_02{
        width: 96%;
        height: 80%;
        margin-left: 4px;
        margin-top: 6px;
       display: flex;
       flex-wrap: wrap;
       align-content: flex-start;
       
        .num_02_01{
            width: 25px;
            height: 25px;
            margin-left: 9px;
            margin-top: 10px;
            background-color: #ff0000;
            color: #f9f7f7;
            text-align: center;
        }
        .num_02_01:focus{
            background-color: #f9f7f7;
            color: #000;
            border: 1px solid #ff0000;
        }
    }

    .XgWork{
        position: absolute;
        left: 63%;
        top: 90%;
    }
}

main{
    width: 85%;
    height: 83.5%;
    box-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 1.8%;
    left: 9.8%;
    
    .ScWork{
        float:right;
        margin-right: 1%;
        width: 7.5%;
        height: 4.5%;
        font-family: "微软雅黑";
        font-size: 100%;
    }

    .XuanZe{
        position: absolute;
        left: 73.5%;
        top: 83%;
    }

    .form-item{
      
      margin-left: -6%;
      margin-top: 1%;

      .form-item-text{
        width: 100%;
        height: 650px;
      }
    }
}

</style>